<!--手动交易对-->
<template>
  <scroller class="scroller bg1"
  @viewappear="viewappear" @viewappear1="viewappear" 
  @viewdisappear="viewdisappear" @viewdisappear1="viewdisappear">
    <div class="wrapper" v-if="loading">

      <VTPair ref="pair" configKey="trading_api_default" 
      @change="pairChange" />

      <template v-if="api && pair">
        <div class="row">
          <VTFunlvue ref="funlvue" 
          :api="api" :pair="pair" 
          @upOrder="upOrder" />
          
          <VTDepth ref="depth" :api="api" :pair="pair" 
          :isContract="false" @price="priceClick" />
        </div>

        <VTOrder ref="order" :api="api" :pair="pair" type="limit" :isContract="false" />
      </template>

    </div>
  </scroller>
</template>

<script>


const weexFunction = weex.requireModule("WeexFunction")
const globalEvent = weex.requireModule('globalEvent');

import VTPair from './view/VTPair.vue' 
import VTFunlvue from './view/VTFunlvue.vue'
import VTDepth from './view/VTDepth.vue'
import VTOrder from './view/VTOrder.vue'
export default {
  components: {
    VTPair,
    VTFunlvue,
    VTDepth,
    VTOrder
  },
  
  data() {
    return {
      loading:false, //true正式加载，避免合约、现货订阅冲突

      api:undefined, //选中api
      pair:undefined, //选中交易对
    };
  },

  mounted() {
    //api资产同步、登录状态改变触发
    globalEvent.addEventListener("upWeex",(e)=>{
      this.$refs.pair && this.$refs.pair.upAvailable();
    });
  },

  methods: {
    /************************************************* 通信*/
    //完全显示
    viewappear(param) {
      weexFunction.debugLog('显示：'+param.url)
      if (param['url'] != 'trading/Trading')return;
      if (this.loading) {
        this.$refs.pair && this.$refs.pair.viewappear();
        this.$refs.funlvue && this.$refs.funlvue.viewappear();
        this.$refs.depth && this.$refs.depth.viewappear();
        this.$refs.order && this.$refs.order.viewappear();
      }
      this.loading = true;
    },

    //完全隐藏
    viewdisappear(param) {
      weexFunction.debugLog('隐藏'+param.url)
      if (param['url'] != 'trading/Trading') return;
      this.$refs.pair && this.$refs.pair.viewdisappear();
      this.$refs.funlvue && this.$refs.funlvue.viewdisappear();
      this.$refs.depth && this.$refs.depth.viewdisappear();
      this.$refs.order && this.$refs.order.viewdisappear();
    },

    /************************************************* 点击*/
    //api、prie改变
    pairChange(api, pair) {
      this.api = api;
      this.pair = pair;
    },
    
    //深度-价格点击
    priceClick(last) {
      this.$refs.funlvue && this.$refs.funlvue.priceChange(last);
    },

    //下单触发-更新订单
    upOrder() {
      this.$refs.order && this.$refs.order.refreshClick(false);
    }
  }
};
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.scroller {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.wrapper{
  flex-direction: column;
  width:750px;
  padding-left: 40px;
  padding-right: 40px;
}
</style>